<template>
  <div
    style="background-color: #fff; border-bottom: 1px solid rgb(231, 230, 230)"
  >
    <header>
      <ul>
        <li>
          <a href="javascript:;" class="pic" @click="HomePage"
            ><img src="../assets/图标.jpg" alt=""
          /></a>
        </li>
        <li><a href="javascript:;" @click="HomePage">首 页</a></li>
        <li><a href="javascript:;">课 程</a></li>
        <li><a href="javascript:;">社 区</a></li>
        <li><a href="javascript:;">收 藏</a></li>
        <li><a href="javascript:;">动 态</a></li>
        <li><a href="javascript:;">消 息</a></li>

        <li
          class="Head-portrait"
          @mouseover="StateDisplay"
          @mouseleave="StateLeave"
          style="margin-right: 0"
          @click="ToPsersonCenter"
        >
          <div>
            <a href="javascript:;">
              <img v-if="picture" :src="picture" alt="" />
              <img v-else src="../assets/头像.jpg" alt="" />
            </a>
            <div class="state" ref="state">
              <p class="state-username">
                “ {{ $store.getters.getLoginUserName }} ”
              </p>
              <p class="state-glory">
                <span class="fans">粉丝</span>
                <span class="attention">关注</span>
                <span class="praise">获赞</span>
              </p>
              <p class="person-center" @click="ToPsersonCenter">个人中心</p>
              <p class="centent-manage">内容管理</p>
              <p
                class="state-exit"
                v-if="$store.getters.getLoginStatus == 1"
                @click.stop="exitlogin"
              >
                退出登录
              </p>
              <p
                class="state-login"
                v-if="$store.getters.getLoginStatus == 0"
                @click.stop="backlogin"
              >
                立即登录
              </p>
            </div>
          </div>
        </li>
        <li style="margin-left: 20px">
          <a
            href="javascript:;"
            class="creation"
            @click.prevent="creativeCenter"
            ><i class="bi bi-pencil-square"></i>创作中心</a
          >
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      UserStatus: 0,
      query_value: "", //查询关键字
      picture: "", //头像链接
    };
  },
  methods: {
    // 跳转到查询界面
    Query() {
      // 传搜索框得值到查询页面
      let token = JSON.parse(sessionStorage.getItem("LoginToken")) || "";
      if (!token.token) {
        alert("未登陆,请先登录!");
      } else {
        // 传搜索框得值到查询页面
        if (this.query_value) {
          this.$router.push({
            name: "BlogQuery",
            query: {
              query_value: this.query_value.trim(),
            },
          });
        }
      }
    },
    //跳转创作中心
    creativeCenter() {
      this.$router.push({
        name: "CreativeCenter",
      });
    },
    //跳转个人主页
    ToPsersonCenter() {
      this.$router.push({
        name: "PersonalCenter",
      });
    },
    // 首页
    HomePage() {
      this.$router.push({
        name: "HomePage",
      });
    },
    // 写博客
    writeblog() {
      this.$router.push({
        name: "WriteBlog",
      });
    },
    // 立即登录
    backlogin() {
      this.$router.push({
        name: "UserLogin",
      });
    },
    StateDisplay() {
      this.$refs.state.style.height = "260px";
    },
    StateLeave() {
      this.$refs.state.style.height = "0";
    },
    // 退出登录
    exitlogin() {
      this.picture = "";
      this.$store.commit("LoginxStatus", { UserStatus: this.UserStatus });
      this.$router.push({
        name: "HomePage",
      });
      sessionStorage.removeItem("LoginMessage");
      sessionStorage.removeItem("LoginToken");
      sessionStorage.removeItem("loginUsername");
    },
    //页面加载
    pageLoad() {
      if (sessionStorage.getItem("LoginMessage")) {
        let userData = JSON.parse(
          sessionStorage.getItem("LoginMessage")
        ).message;
        if (userData.picture) {
          this.picture = "http://" + userData.picture;
        }
      }
    },
  },
  created() {
    this.pageLoad();
  },
};
</script>

<style scoped>
/* @import url("../iconfont/iconfont.css"); */
* {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
header {
  padding: 0 10px 0 10px;
  width: 100%;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  font-size: 23px;
  box-sizing: border-box;
}
.pic {
  width: 70px;
  height: 50px;
  margin-left: 15px;
  margin-top: 5px;
}
.pic img {
  width: 90%;
}
header > ul {
  display: inline-block;
}
header > ul > li {
  padding: 0 53px;
}
li {
  float: left;
}
header .Head-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 12px 0 0 25px;
  background-color: pink;
  padding: 0 !important;
}
header .Head-portrait img {
  width: 100%;
}
header a {
  display: inline-block;
}
header .creation {
  position: relative;
  background-color: skyblue;
  padding: 0px 15px;
  border-radius: 20px;
  height: 45px;
  line-height: 45px;
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}
header .creation:hover {
  background-color: rgb(95, 193, 231);
}

header .creation i {
  margin-right: 10px;
}
/* 登录状态显示 */
.state {
  width: 220px;
  height: 0px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  position: absolute;
  /* left: 820px; */
  right: 210px;
  top: 60px;
  z-index: 1;
  font-size: 16px;
  transition: all 0.2s;
}
.state-username {
  width: 100%;
  /* height: 0px; */
  text-align: center;
  font-size: 16px;
}
.state-glory {
  cursor: pointer;
  height: 50px;
  display: flex;
  border-bottom: 1px solid rgb(224, 223, 223);
  border-top: 1px solid rgb(224, 223, 223);
}
.state-glory span {
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  flex: 1;
}
.person-center,
.centent-manage {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  margin: 10px 0px;
}
.state-exit,
.state-login {
  cursor: pointer;
  height: 50px;
  line-height: 50px;
}
.person-center,
.centent-manage,
.exit {
  margin-left: 20px;
  /* border-bottom: 1px solid #ccc; */
}
.person-center::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e602";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  font-size: 18px;
}
.centent-manage::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e637";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  font-size: 18px;
}
.state-exit::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e618";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  margin-left: 20px;
  font-weight: 700;
  font-size: 20px;
}
.state-login::before {
  content: "\e67c";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  margin-left: 20px;
  font-weight: 700;
  font-size: 23px;
}
.fans::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e612";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.attention::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8bc";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
</style>